<template>
    <nav-bar class="detail-nav-bar">
      <template v-slot:left>
        <div class="detail-nav-bar-left" @click="backClick">
          <img src="../../../assets/img/detail/返回.svg" alt="">
        </div>
      </template>
      <template v-slot:center>
        <div class="detail-nav-bar-center">
          <div class="detail-nav-bar-item"
               v-for="(item,index) in title"
               :class="{active:currPoint==index}"
               @click="itemClick(index)"
          >
            {{item}}
          </div>
        </div>
      </template>
    </nav-bar>
</template>

<script>
  import NavBar from "../../../components/common/navbar/NavBar";
  export default {
    name: "DetailNavBar",
    data(){
      return{
        title:['商品','参数','评论','推荐'],
        currPoint:0,
      }
    },
    components:{
      NavBar,
    },
    methods:{
      backClick(){
        this.$router.back()
      },
      itemClick(index){
        this.currPoint=index;
        this.$emit('itemClick',index)
      },
    }
  }
</script>

<style scoped>
  .detail-nav-bar{
    box-shadow: 0 1px 0 rgba(100,100,100,0.10);
    width: 100%;
    height: 44px;

  }
  .detail-nav-bar-center{
    display: flex;
    font-size: 13px;
  }
  .detail-nav-bar-item{
    flex: 1;
  }
  .detail-nav-bar-left{

  }
  .detail-nav-bar-left img{
    width: 20px;
    height: 20px;
    margin-top: 13px;
  }
  .active{
    color: #E91E62;
  }

</style>